<!--  -->
<template>
 <div class='fullW'>
  <div class="login" v-if="!isLogin">
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="账号" prop="user">
        <el-input v-model="formData.user"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="formData.pwd" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loginForm">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div v-if="isLogin" class="fetch">

    <el-container>
      <el-main class="cent">
        <div class="btns">
          <el-radio-group v-model="fetchName" size="small" @change="fetchData">
            <el-radio-button label="header">页头</el-radio-button>
            <el-radio-button label="footer">页尾</el-radio-button>
            <el-radio-button label="index">首页</el-radio-button>
            <el-radio-button label="oms">OMS</el-radio-button>
            <el-radio-button label="tms">TMS</el-radio-button>
            <el-radio-button label="wms">WMS</el-radio-button>
            <el-radio-button label="proFunc">解决方案</el-radio-button>
            <el-radio-button label="about">关于我们</el-radio-button>
            <el-radio-button label="experience">体验DEMO</el-radio-button>
          </el-radio-group>
          <el-button size="small" type="primary" @click="uploadJSON">保存JSON</el-button>
        </div>
        <div ref="editorContainer" class="editor"></div>
      </el-main>
      <el-aside class="aside">
        <el-upload
          action="/cms-api/config/ResourceRpc/uploadFile.json"
          accept=".jpeg,.jpg,.png,.svg,.gif"
          multiple
          :with-credentials="true"
          :on-success="handleSuccess"
          :show-file-list="false"

          >
          <!-- :http-request="uploadFile" -->
          <el-button size="small" type="primary">上传图片</el-button>
        </el-upload>
        <div class="list">
          <ul>
            <li v-for="(item,index) in fileList" :key="index">
              <img :src="item.url">
              <div class="">
                <el-popover trigger="hover" :content="item.url" placement="top">
                  <span class="url" slot="reference">{{ item.url }}</span>
                </el-popover>
                <el-button type="primary" size="mini" @click="copyCode(item.url)">复制路径</el-button>
              </div>
              <div>
                <i class="delete el-icon-delete" @click="handleRemove(index)"></i>
              </div>
            </li>
          </ul>
        </div>
      </el-aside>
    </el-container>

  </div>
 </div>
</template>

<script>
import qs from 'qs'
import * as monaco from 'monaco-editor'
import { ALI_API } from '@/utils'
export default {
  data(){
    return {
      isLogin:false,
      fetchName:'header',
      formData:{
        user:'',
        pwd:''
      },
      rules:{
        user: [{required: true, message: '请输入账号', trigger: 'blur'  }],
        pwd: [{required: true, message: '请输入密码', trigger: 'blur'  }],
      },
        // 编辑器中呈现的内容
      codes: '',
      readOnly: false,
      // 主要配置
      editorOptions: {
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: this.readOnly, // 只读
        cursorStyle: 'line', // 光标样式
        automaticLayout: false, // 自动布局
        glyphMargin: true, // 字形边缘
        useTabStops: false,
        fontSize: 28, // 字体大小
        autoIndent: false // 自动布局
      },
      fileList: []
    }
  },
  methods:{
    loginForm(){
      this.$refs['formRef'].validate((valid) => {
          if (valid) {
            this.$axios.get(`/cms-api/config/UserRpc/login.json`,{
              params:this.formData
            }).then(res=>{
              if(res.code===0){
                this.isLogin=true
                this.fetchData()
              }else{
                this.$message.error(res.message)
              }

            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
   async fetchData(){
      const response = await fetch(`${ALI_API}/kyb_office/${this.fetchName}.json`)
      const data =  await response.json()
      if(this.monacoEditor){
          this.monacoEditor.setValue(JSON.stringify(data));
        }else{
          this.monacoEditor = monaco.editor.create(this.$refs.editorContainer, {
            value: JSON.stringify(data), //
            language: 'json',
            theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
            editorOptions: this.editorOptions // 同codes
          })
        }
    },
    handleRemove(index) {
      this.fileList.splice(index,1)
    },
    handleSuccess(response, file, fileList) {
      if(response.code === 0){
        this.fileList.push({name:response.data.fileName,url:ALI_API+'/'+response.data.filePath})
      }
    },
    copyCode(url){
      this.$copyText(url).then(
        res => {
          this.$message.success('复制成功')
        },
        err => {
          this.$message.error('复制失败')
        }
      )
    },
    uploadFile({file}){

        // 使用FormData传参数和文件
        var form = new FormData();
        // 文件
        form.append("file", file);
        this.$axios.post(`/cms-api/config/ResourceRpc/uploadFile.json`,form)
    },
    uploadJSON(){
      this.$axios.post(`/cms-api/config/ResourceRpc/uploadJson.json`,qs.stringify({
        fileName:this.fetchName+'.json',
        jsonContent:this.monacoEditor.getValue()
      })).then(res=>{
        if(res.code === 0){
          this.$message.success('操作成功')
        }

      })
    }
  }
}
</script>
<style lang='scss' scoped>
.login{
  width: 500px;
  margin: 200px auto;
}

.fetch{
  margin: 40px 0;
  .btns{
    display: flex;
    justify-content:space-between;
    margin-bottom: 20px;
  }
  .cent{
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .editor{
    width: 100%;
    height: 600px;
    border-radius: 5px;
    overflow: hidden;
  }
}
.list{
  margin-top: 20px;
  height: 590px;
  overflow: auto;
  li{
    display: flex;
    margin-bottom: 20px;
    img{
      width: 80px;
      margin-right: 10px;
      border-radius: 5px;
    }
    .url{
      width: 190px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      word-break:break-all;
      color: #666;
    }
    .delete{
      cursor: pointer;
    }
  }
}
</style>
